<template>
	<view>
	<view class="buttons">
		<uni-fab
			horizontal="right"
			vertical="top"
			:content='[
				{
					iconPath:"../../static/cat.png",
					text:"编辑"
				},
				{
					iconPath:"../../static/delete.png",
					text:"删除"
				}
			]'
			@trigger="onFabClick"
		></uni-fab>
	</view>
		<u-loading-page loading-text="加载中" :loading="loading" v-if="loading"></u-loading-page>
		<view v-else>
			<view class="status" :style="{ opacity: afterHeaderOpacity }"></view>
			<!-- 底部菜单 -->
			<view class="footer">
				<view class="btn">
					<view class="joinCart" @tap="cargo(true)">进货</view>
					<view class="buy" @tap="cargo(false)">出货</view>
				</view>
			</view>
			<!-- 服务-模态层弹窗 -->
			<view class="popup service" :class="serviceClass" @touchmove.stop.prevent="discard" @tap="hideService">
				<!-- 遮罩层 -->
				<view class="mask"></view>
				<view class="layer" @tap.stop="discard">
					<view class="content">
						<view class="row">
							{{houseDetial && houseDetial.note}}
						</view>
					</view>
					<view class="btn"><view class="button" @tap="hideService">完成</view></view>
				</view>
			</view>
			<!-- 规格-模态层弹窗 -->
			<view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
				<view class="mask"></view>
				<view class="layer" @tap.stop="discard">
					<view class="content">
						<STST :value='houseDetial.list || []' ref="stst" :houseNumInfo="houseDetial"></STST>
					</view>
					<view class="btn"><view class="button" @tap="onAddHouseNumFinish">{{ isStack ? "入库" : "出库" }}</view></view>
				</view>
			</view>
			<!-- 商品主图轮播 -->
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="imgUrl,index in imgeList" :key="index">
						<image :src="imgUrl"></image>
					</swiper-item>
				</swiper>
				<view class="indicator">{{currentSwiper+1}}/{{imgeList.length}}</view>
			</view>
			<!-- 标题 价格 -->
			<view class="info-box goods-info">
				<view class="price">￥{{houseDetial.price}}</view>
				<view class="title">
					{{houseDetial.name}}
				</view>
			</view>
			<!-- 服务-规则选择 -->
			<view class="info-box spec">
				<view class="row" @tap="showService">
					<view class="text">说明</view>
					<view class="content"><view class="serviceitem">点击查看详细说明</view></view>
					<view class="arrow"><view class="icon xiangyou"></view></view>
				</view>
			</view>
			<view class="info-box inoutinfo">
				<view>
					进货:<text style="color: green;">{{neatFigure(houseDetial.on_num)}}</text>
				</view>
				<view>
					出货:<text style="color: #ff67bd;">{{neatFigure(houseDetial.out_num)}}</text>
				</view>
				<view>
					库存:<text style="color: blue;">{{neatFigure(houseDetial.house_num)}}</text>
				</view>
			</view>
			<!-- 评价 -->
			<view class="info-box comments" id="comments">
				<view class="row">
					<view class="text">近期2条库存记录</view>
					<view class="arrow" @tap="toRatings">
						<view class="show" @tap="showComments()">
							查看全部记录({{logTotal}})
							<view class="icon xiangyou"></view>
						</view>
					</view>
				</view>
				<view class="comment" @tap="toRatings" v-for="item,index in logList" :key="item.id">
					<view class="user-info">
						<view class="face">
							<image :src="`../../static/${item.method ? 'down':'up' }.png`" ></image>
							</view>
						<view class="username">时间: {{item.sale_time}}</view>
					</view>
					<view class="content">
						分类关键字: {{item.sold_key}}
					</view>
					<view class="content">
						备注: {{item.note || "-"}}
					</view>
					<view class="pirceNum">
						<text>数量: {{neatFigure(item.num)}} </text>
						<text>价格:<text>{{neatFigure(item.price)}}￥</text></text>
					</view>
				</view>
			</view>
			
		</view>
		<u-modal 
			:show="fabShow" 
			showCancelButton 
			@confirm="fabClick" 
			@cancel="fabShow = false"
			ref="uModal" 
			title="提示">{{fabShowText}}</u-modal>
	</view>
</template>

<script>
import { getHouseDetial,getAddHouse,getDelHosue,getLogHouse } from '@/request/index.js'
import { neatFigure } from "@/tools/number.js"
export default {
	data() {
		return {
			//控制渐变标题栏的参数
			id:"",
			fabShow:false,
			fabShowText:"",
			fabShowIndex:-1,
			houseDetial:{},
			loading:true,
			beforeHeaderzIndex: 11,//层级
			afterHeaderzIndex: 10,//层级
			beforeHeaderOpacity: 1,//不透明度
			afterHeaderOpacity: 0,//不透明度
			//是否显示返回按钮
			// #ifndef MP
			showBack:true,
			// #endif
			//轮播主图数据
			currentSwiper: 0,
			anchorlist:[],//导航条锚点
			selectAnchor:0,//选中锚点
			serviceClass: '',//服务弹窗css类，控制开关动画
			specClass: '',//规格弹窗css类，控制开关动画
			shareClass:'',//分享弹窗css类，控制开关动画
			selectSpec:null,//选中规格,
			isStack:false,
			logList:[],
			logTotal:0
		};
	},
	computed:{
		imgeList(){
			const { houseDetial } = this
			const list = [houseDetial.img]
			if (houseDetial.list && houseDetial.list.length > 0){
				houseDetial.list.forEach(item=>{
					item.list.forEach(elmitem => {
						elmitem.img && list.push(elmitem.img)
					})
				})
			}
			return list
			
		}
	},
	onLoad(option) {
		// #ifdef MP
		//小程序隐藏返回按钮
		this.showBack = false;
		// #endif
		//option为object类型，会序列化上个页面传递的参数
		this.id = option.id
		this.setHouseDetial()
		this.setLogHouse()
	},
	methods: {
		//轮播图指示器
		swiperChange(event) {
			this.currentSwiper = event.detail.current;
		},
		async setLogHouse(){
			const {list,total} = await getLogHouse({
				id:this.id,
				page:1,
				size:2
			})
			this.logList = list
			this.logTotal = total
		},
		async fabClick(){
			if (this.fabShowIndex === 0){
				uni.$reData = this.houseDetial
				this.$Router.push("/pages/addHouse/addHouse?rewrite=true")
			}else{
				try{
					await getDelHosue(this.id)
					uni.showToast({
						title:"已删除",
						icon:'success',
						success:()=> {
							this.fabShow = false
							uni.$rIndex = true
							setTimeout(()=>{
								this.$Router.push("/pages/index/index")
							},2000)
						}
					})
				}catch{
					uni.showToast({
						icon:"error",
						title:"删除失败请稍后再试"
					})
				}
			}
		},
		onFabClick({index}){
			this.fabShow = true;
			this.fabShowIndex = index
			if(index === 0){
				this.fabShowText = "确定要前往编辑页面吗"
			}else{
				this.fabShowText = '确定删除吗?'
			}
		},
		async setHouseDetial(){
			try{
				if (!this.id)throw ''
				const res = await getHouseDetial(this.id)
				this.loading = false
				this.houseDetial = res
			}catch{
				uni.showToast({
					title:"商品信息获取失败",
					icon:"none"
				})
				setTimeout(()=>{
					this.$Router.pushTab("/")
				},2000)
			}
		},
		async onAddHouseNumFinish(){
			const {formData,result,houseNum} = this.$refs.stst
			const { id,isStack } = this
			const { note,num,price:open_price } = formData
			const method = Number(isStack)
			if(!method && (houseNum - num < 0)){
				this.$refs.stst.formData.num = 1
				uni.showToast({
					icon:"none",
					title:"违规操作，出库数量超过已有库存"
				})
				return
			}
			let class_key = '',key = "";
			result.forEach(item => {
				class_key += item.id + ';'
				key += item.name + ';'
			})
			if(class_key.length === 0){
				class_key = 'none'
			}
			if (key.length === 0){
				key = 'none'
			}
			const data = {
				id,
				key,
				open_price,
				note,method,
				class_key,
				num
			}
			try{
				await getAddHouse(data)
				this.specClass = 'hide'; 
				uni.showToast({
					icon:"none",
					title:"操作成功"
				})
				uni.$rIndex = true
				this.$refs.stst.formData = {
					num:1,
					price:0,
					note:""
				}
				
				this.setLogHouse()
				this.setHouseDetial()
			}catch{
				uni.showToast({
					icon:"none",
					title:"请求错误请稍后再试"
				})
			}
		},
		neatFigure,
		//商品评论
		toRatings(){
			
		},
		cargo(stock){
			this.isStack = stock
			this.specClass = 'show';
		},
		//跳转评论列表
		showComments(goodsid){
			
		},
 
		//返回上一页
		back() {
			uni.navigateBack();
		},
		//服务弹窗
		showService() {
			this.serviceClass = 'show';
		},
		//关闭服务弹窗
		hideService() {
			this.serviceClass = 'hide';
			setTimeout(() => {
				this.serviceClass = 'none';
			}, 200);
		},
		//规格弹窗
		showSpec(fun) {
			console.log('show');
			
			this.specCallback = fun;
		},
		specCallback(){
			return;
		},
		//关闭规格弹窗
		hideSpec() {
			this.specClass = 'hide';
			//回调

			this.selectSpec&&this.specCallback&&this.specCallback();
			this.specCallback = false;
			setTimeout(() => {
				this.specClass = 'none';
			}, 200);
		},
		discard() {
			//丢弃
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f8f8f8;
	padding-bottom: 99upx;;
}
.pirceNum{
	display: flex;
	align-items: center;
	justify-content:space-around;
	font-size: 27rpx;
	font-weight: 700;
	text{
		text{
			color: red;
		}
	}
}
.inoutinfo{
	display: flex;
	
	& text {
		font-weight: 700;
	}
	
	&>view {
		width: 33.33%;
		text-align: left;
		font-size: 27rpx;
	}
}
@keyframes showPopup {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes hidePopup {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	@keyframes showLayer {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(-100%);
		}
	}
	@keyframes hideLayer {
		0% {
			transform: translateY(-100%);
		}
		100% {
			transform: translateY(0);
		}
	}

.icon {
	font-size: 26upx;
}
.buttons{
	position: absolute;
	top:30rpx;
	right: 120rpx;
}
.status {
	width: 100%;
	height: 0;
	position: fixed;
	z-index: 10;
	top: 0;
	/*  #ifdef  APP-PLUS  */
	height: var(--status-bar-height); //覆盖样式
	/*  #endif  */
	background-color: #f1f1f1;
	transition: opacity 0.05s linear;
}
.header {
	width: 100%;

	height: 100upx;
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	z-index: 10;
	/*  #ifdef  APP-PLUS  */
	top: var(--status-bar-height);
	/*  #endif  */
	.before,
	.after {
		width: 92%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		/*  #ifdef  APP-PLUS  */
			top: var(--status-bar-height);
		/*  #endif  */
		transition: opacity 0.05s linear;
		.back {
			width: 125upx;
			height: 60upx;
			flex-shrink: 0;
			.icon {
				margin-left: -10%;
				width: 60upx;
				height: 60upx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 42upx;
			}
		}
		.middle {
			width: 100%;
		}
		.icon-btn {
			width: 125upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			.icon {
				&:first-child{
					margin-right: 5upx;
				}
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 42upx;
			}
		}
	}
	.before {
		.back {
			.icon {
				color: #fff;
				background-color: rgba(0, 0, 0, 0.2);
				border-radius: 100%;
			}
		}
		.icon-btn {
			.icon {
				color: #fff;
				background-color: rgba(0, 0, 0, 0.2);
				border-radius: 100%;
				
			}
		}
	}
	.after {
		background-color: #f1f1f1;
		.back {
			.icon {
				color: #666;
			}
		}
		.icon-btn {
			.icon {
				color: #666;
			}
		}
		.middle {
			font-size: 32upx;
			height: 90upx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 7%;
			view {
				width: (100%/3);
				padding: 0 3%;
				margin: 0 3%;
				display: flex;
				justify-content: center;
				align-items: center;
				&.on {
					margin-bottom: -4upx;
					color: #f47952;
					border-bottom: solid 4upx #f47952;
				}
			}
		}
	}
}
.swiper-box {
	.cat{
		position: absolute;
		right: 30rpx;
		top: 40rpx;
		z-index: 20;
		width: 60rpx;
		padding: 10rpx;
		border-radius: 50%;
		opacity: 0.5;
		height: 60rpx;
		background-color: white;
		img{
			height: 100%;
			width: 100%;
		}
	}
	position: relative;
	width: 100%;
	height: 100vw;
	swiper {
		width: 100%;
		height: 100vw;
		swiper-item {
			image {
				width: 100%;
				height: 100vw;
			}
		}
	}
	.indicator{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 25upx;
		height: 40upx;
		border-radius: 40upx;
		font-size: 22upx;
		position: absolute;
		bottom: 20upx;
		right: 20upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.2);
	}
}
.info-box {
	width: 92%;
	padding: 20upx 4%;
	background-color: #fff;
	margin-bottom: 20upx;
}

.goods-info {
	.price {
		font-size: 46upx;
		font-weight: 600;
		color: #f47925;
	}
	.title {
		font-size: 30upx;
	}
}
.spec {
	.row {
		width: 100%;
		display: flex;
		align-items: center;
		.text {
			font-size: 24upx;
			color: #a2a2a2;
			margin-right: 20upx;
		}
		.content {
			font-size: 28upx;
			display: flex;
			flex-wrap: wrap;
			.serviceitem{
				margin-right: 10upx;
			}
			.sp {
				width: 100%;
				display: flex;
				view {
					background-color: #f6f6f6;
					padding: 5upx 10upx;
					color: #999;
					margin-right: 10upx;
					font-size: 20upx;
					border-radius: 5upx;
					&.on{
						border: solid 1upx #f47952;
						padding: 4upx 8upx;
					}
				}
			}
		}
		.arrow {
			position: absolute;
			right: 4%;
			.icon {
				color: #ccc;
			}
		}
	}
}
.comments {
	.row {
		width: 100%;
		height: 40upx;
		display: flex;
		align-items: center;
		margin: 0 0 30upx 0;
		.text {
			font-size: 30upx;
		}
		.arrow {
			font-size: 28upx;
			position: absolute;
			right: 4%;
			color: #17e6a1;
			.show {
				display: flex;
				align-items: center;
				.icon {
					color: #17e6a1;
				}
			}
		}
	}
	.comment {
		width: 100%;
		height: 166rpx;
		border-bottom: #999 solid 1rpx;
		.user-info {
			width: 100%;
			height: 40upx;
			display: flex;
			align-items: center;
			.face {
				width: 40upx;
				height: 40upx;
				margin-right: 8upx;
				image {
					width: 40upx;
					height: 40upx;
					border-radius: 100%;
				}
			}
			.username {
				font-size: 24upx;
				color: #999;
			}
		}
		.content {
			margin-top: 10upx;
			font-size: 26upx;
		}
	}
}
.description {
	.title {
		width: 100%;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26upx;
		color: #999;
	}
}
.footer {
	position: fixed;
	bottom: 0upx;
	width: 92%;
	padding: 0 4%;
	height: 99upx;
	border-top: solid 1upx #eee;
	background-color: #fff;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.btn {
		height: 80upx;
		border-radius: 40upx;
		overflow: hidden;
		display: flex;
		margin-right: -2%;
		flex: 1;
		.joinCart,
		.buy {
			height: 80upx;
			padding: 0 40%upx;
			color: #fff;
			display: flex;
			align-items: center;
			font-size: 28upx;
			flex: 50%;
			justify-content: center;
		}
		.joinCart {
			background-color: #f0b46c;
		}
		.buy {
			background-color: #f06c7a;
		}
	}
}
.popup {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
	display: none;
	.mask{
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 21;
		background-color: rgba(0, 0, 0, 0.6);
	}
	.layer {
		position: fixed;
		z-index: 22;
		bottom: -70%;
		width: 92%;
		padding: 0 4%;
		height: 70%;
		border-radius: 20upx 20upx 0 0;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		.content {
			width: 100%;
			padding: 20upx 0;
		}
		.btn {
			width: 100%;
			height: 100upx;
			.button {
				width: 100%;
				height: 80upx;
				border-radius: 40upx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #f47952;
				font-size: 28upx;
			}
		}
	}
	
	&.show {
		display: block;
		.mask{
			animation: showPopup 0.2s linear both;
		}
		.layer {
			animation: showLayer 0.2s linear both;
		}
	}
	&.hide {
		display: block;
		.mask{
			animation: hidePopup 0.2s linear both;
		}
		
		.layer {
			animation: hideLayer 0.2s linear both;
		}
	}
	&.none {
		display: none;
	}
	&.service {
		.row {
			margin: 30upx 0;
			.title {
				font-size: 30upx;
				margin: 10upx 0;
			}
			.description {
				font-size: 28upx;
				color: #999;
			}
		}
	}
	&.spec {
		.title {
			font-size: 30upx;
			margin: 30upx 0;
		}
		.sp {
			display: flex;
			view {
				font-size: 28upx;
				padding: 5upx 20upx;
				border-radius: 8upx;
				margin: 0 30upx 20upx 0;
				background-color: #f6f6f6;
				&.on {
					padding: 3upx 18upx;
					border: solid 1upx #f47925;
				}
			}
		}
		.length{
			margin-top: 30upx;
			border-top: solid 1upx #aaa;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 20upx;
			.text{
				font-size: 30upx;
			}
			.number{
				display: flex;
				justify-content: center;
				align-items: center;
				.input{
					width: 80upx;
					height: 60upx;
					margin: 0 10upx;
					background-color: #f3f3f3;
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					input{
						width: 80upx;
						height: 60upx;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						font-size: 26upx;
					}
				}
				
				.sub ,.add{
					width: 60upx;
					height: 60upx;
					background-color: #f3f3f3;
					border-radius: 5upx;
					.icon{
						font-size: 30upx;
						width: 60upx;
						height: 60upx;
						display: flex;
						justify-content: center;
						align-items: center;
						
					}
				}
			}
		}
		
	}
}
.share{
	display: none;
	&.show {
		display: block;
		.mask{
			animation: showPopup 0.15s linear both;
		}
		.layer {
			animation: showLayer 0.15s linear both;
		}
	}
	&.hide {
		display: block;
		.mask{
			animation: hidePopup 0.15s linear both;
		}
		
		.layer {
			animation: hideLayer 0.15s linear both;
		}
	}
	&.none {
		display: none;
	}
	.mask{
		background-color: rgba(0,0,0,.5);
		position: fixed;
		width: 100%;
		height: 100%;
		top:0;
		z-index: 11;
	}
	.layer{
		width: 92%;
		position: fixed;
		z-index: 12;
		padding: 0 4%;
		top: 100%;
		background-color: rgba(255,255,255,0.9);
		.list{
			width: 100%;
			display: flex;
			padding:10upx 0 30upx 0;
			.box{
				width: 25%;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				image{
					width: 13.8vw;
					height: 13.8vw;
				}
				.title{
					margin-top: 10upx;
					display: flex;
					justify-content: center;
					width: 100%;
					font-size: 26upx;
				}
			}
		}
		.btn{
			width: 100%;
			height: 100upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28upx;
			border-top: solid 1upx #666666;
		}
		.h1{
			width: 100%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 34upx;
		}
	}
}
</style>
